<template>
    <div class="friend-moment-item">
      <!-- 左侧头像 -->
      <div class="moment-avatar">
        <Avatar :width="36" :show-detail="true"></Avatar>
      </div>

      <!-- 右侧内容 -->
      <div class="moment-right">
        <div class="member-nickname">{{ friendMoment.nickname }}</div>
        <div class="moment-content">
          <div class="content">{{ friendMoment.content }}</div>
          <div class="images">
            <!-- 最大支持9个预览 -->
            <img
              :src="image"
              v-for="(image, index) in friendMoment.images.slice(0, 9)"
              :key="index"
            >
            </img>
          </div>
        </div>

        <!-- 底部操作 -->
        <div class="moment-bottom">
          <div class="moment-time">{{ friendMoment.createtime }}</div>
          <div class="comment">
            <span class="iconfont icon-gengduo"></span>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import Avatar from '../avatar/Avatar.vue';


defineProps({
  friendMoment: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.friend-moment-item {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  margin-top: 25px;

  .moment-avatar {
    padding-right: 10px;
  }

  .moment-right {
    padding-bottom: 18px;
    border-bottom: 1px solid #e6e6e6;

    .member-nickname {
      padding-bottom: 10px;
      font-size: 14px;
      color: #576b95;
    }

    .moment-content {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .content {
        font-size: 15px;
        padding-bottom: 10px;
      }

      .images {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 400px;

        // 只有一个照片
        &>img:only-child {
          width: 100%;
        }

        // 有两张照片
        &>img:first-child:nth-last-child(2),
        &>img:nth-child(2):nth-last-child(1) {
          width: 198px;
        }

        &>img:nth-child(2):nth-last-child(1) {
          margin-left: 3px;
        }

        // 有三张照片
        &>img:first-child:nth-last-child(3),
        &>img:nth-child(2):nth-last-child(2),
        &>img:nth-child(3):nth-last-child(1) {
          width: 130px;
        }

        &>img:nth-child(2):nth-last-child(2),
        &>img:nth-child(3):nth-last-child(1)  {
          margin-left: 3.33px;
        }

        // 有四张照片
        &>img:first-child:nth-last-child(4),
        &>img:first-child:nth-last-child(4) ~ img {
          width: 198px;
        }

        &>img:nth-child(2):nth-last-child(3),
        &>img:nth-child(4):nth-last-child(1) {
          margin-left: 3px;
        }

        &>img:nth-child(2):nth-last-child(3) ~ img {
          margin-top: 3px;
        }

        &>img:first-child:nth-last-child(n + 5),
        &>img:first-child:nth-last-child(n + 5) ~ img {
          width: 130px;
        }

        &>img:nth-child(3n - 1),
        &>img:nth-child(3n) {
          margin-left: 3px;
        }

        &>img:nth-child(3):nth-last-child(2) {
          margin-left: 0px;
        }

        &>img:nth-child(3) ~ img {
          margin-top: 3px;
        }
      }
    }

    .moment-bottom {
      width: 100%;
      height: 18px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .moment-time {
        font-size: 12px;
        text-align: center;
        color: #9e9e9e;
      }

      .comment {
        width: 33px;
        height: 20px;
        background-color: #f7f7f7;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;

        span {
          font-size: 20px;
        }

        &:hover {
          cursor: pointer;
          background-color: #dedede;
        }
      }
    }
  }
}
</style>
